<template>
    <div id="abnormalBrac">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item>异常手环</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div class="select">
                <label class="label">设备号：</label>
                <el-input v-model="deviceNum"></el-input>
                <label class="label">异常说明：</label>
                <el-select v-model="abnormalReason">
                    <el-option label='数据未上传' value='1'></el-option>
                    <el-option label='手环未佩带' value='2'></el-option>
                    <el-option label='电量过低' value='3'></el-option>
                </el-select>
                <el-button type="primary" @click="getList(1)">搜索</el-button>
                <el-button type="primary" @click="openBounce" class="fr">设置</el-button>
            </div>

            <div class="list">
                <el-table :data="list">
                    <el-table-column type="index" label="序号"></el-table-column>
                    <el-table-column prop="deviceNum" label="设备号"></el-table-column>
                    <el-table-column prop="abnormalReasonText" label="异常说明"></el-table-column>

                    <template v-if="abnormalReasonType == 2">
                        <el-table-column prop="unwornTime" label="手环未佩戴时间"></el-table-column>
                        <el-table-column prop="unwornStartTime" label="手环未佩戴开始时间"></el-table-column>
                        <el-table-column prop="unwornEndTime" label="手环未佩戴结束时间"></el-table-column>
                    </template>
                    <template v-else>
                        <el-table-column prop="lastDate" label="最近一次数据上传时间"></el-table-column>
                        <el-table-column v-if="abnormalReasonType == 1" prop="notUploadNum" label="连续未上传次数"></el-table-column>
                        <el-table-column v-if="abnormalReasonType == 3" prop="voltage" label="最近一次数据上传时手环电压"></el-table-column>
                    </template>
                    <el-table-column prop="schoolName" label="使用学校"></el-table-column>
                    <el-table-column prop="className" label="使用班级"></el-table-column>
                    <el-table-column prop="stuName" label="使用学生姓名"></el-table-column>
                    <el-table-column prop="stuNum" label="使用学生学籍号"></el-table-column>
                    <el-table-column label="备注" align="center">
                        <template slot-scope="scope">
                            <div @click="openDialog(scope.row)" style="cursor:pointer">
                                <span>{{scope.row.remark}}</span>
                                <i class="el-icon-edit-outline"></i>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 10" layout="total, prev, pager, next, jumper" :page-size="10" :current-page="currentPage"
                        :total="totalCount" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>

                <el-dialog title="备注" :visible.sync="dialogVisible">
                    <el-form label-width="120px" :model="form" :rules="rules" ref="form" @submit.native.prevent>
                        <el-form-item label="备注：" prop="remark">
                            <el-input v-model="form.remark"></el-input>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="updateRemark">确 定</el-button>
                    </span>
                </el-dialog>
                <el-dialog title="手环异常定义设置：" :visible.sync="dialogVisible1">
                    <el-form :model="form1" :rules="rules1" ref="ruleform" label-width="120px">
                        <el-form-item label="数据未上传：" prop="uploadNum">
                            截止目前连续
                            <el-input v-model.number="form1.uploadNum" class="my-inp" type="number" style="ime-mode:disabled"></el-input>次以上数据未上传。
                        </el-form-item>
                        <el-form-item label="未佩带时长：" prop="unwornNum">
                            连续
                            <el-input v-model.number="form1.unwornNum" class="my-inp" type="number" style="ime-mode:disabled"></el-input>个小时未佩带。
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible1 = false">取 消</el-button>
                        <el-button type="primary" @click="updateRule">确 定</el-button>
                    </span>
                </el-dialog>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                deviceNum: "",
                abnormalReason: "1",
                abnormalReasonType: "1",
                dialogVisible: false,
                dialogVisible1: false,
                option: new Map([
                    [1, "数据未上传"], [2, "手环未佩带"], [3, "电量过低"]
                ]),
                form: {
                    deviceNum: "",
                    remark: "",
                    id: ""
                },
                form1: {
                    unwornNum: 3,
                    uploadNum: 3
                },
                rules: {
                    remark: [
                        { required: true, message: "备注不能为空", trigger: "blur" }
                    ]
                },
                rules1: {
                    unwornNum: [
                        { required: true, message: "请输入数据未上传次数", trigger: "blur" }
                    ],
                    uploadNum: [
                        { required: true, message: "请输入数据上传为空次数", trigger: "blur" }
                    ],
                    lowElectricity: [
                        { required: true, message: "请输入电量过低百分比", trigger: "blur" }
                    ]
                },
                list: [],
                totalCount: 0,
                currentPage: 1
            }
        },
        mounted() {
            this.getList(this.currentPage);
        },
        methods: {
            getList(pageNum) {
                this.$axios.post("/adminapi/bangle/abnormal/v1/list", {
                    deviceNum: this.deviceNum,
                    abnormalReason: this.abnormalReason * 1,
                    pageSize: 10,
                    pageNum: pageNum * 1
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.list = [];
                        let list = response.data.data.list;
                        this.totalCount = response.data.data.totalNum * 1;
                        this.abnormalReasonType = this.abnormalReason;

                        list.forEach(item => {
                            item.lastDate = item.lastDate ? new Date(item.lastDate).format("yyyy-MM-dd hh:mm:ss") : "";
                            item.unwornStartTime = item.unwornStartTime ? new Date(item.unwornStartTime).format("yyyy-MM-dd hh:mm:ss") : "";
                            item.unwornEndTime = item.unwornEndTime ? new Date(item.unwornEndTime).format("yyyy-MM-dd hh:mm:ss") : "";
                            item.unwornTime = item.unwornTime + "小时";
                            item.notUploadNum = item.notUploadNum + "次";
                            item.abnormalReasonText = this.option.get(item.abnormalReason);
                            this.list.push(item);
                        });
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList(val);
            },
            openDialog(row) {
                this.form.deviceNum = row.deviceNum;
                this.form.remark = row.remark || "";
                this.form.id = row.id;

                this.dialogVisible = true;
            },
            updateRemark() {
                this.$refs.form.validate(valid => {
                    if (valid) {
                        this.dialogVisible = false;
                        this.$axios.post("/adminapi/bangle/abnormal/v1/update/remark", {
                            id: this.form.id,
                            abnormalReason: this.abnormalReason * 1,
                            remark: this.form.remark
                        }).then(response => {
                            if (response.data.error == 10000) {
                                this.$util.successMsg("备注成功");
                                this.getList(this.currentPage);
                            } else {
                                this.$util.errorMsg(response.data.message);
                            }
                        }).catch(response => {
                            this.$util.errorMsg(response.data.message);
                        })
                    }
                })
            },
            updateRule() {
                this.$refs.ruleform.validate(valid => {
                    if (valid) {
                        this.dialogVisible1 = false;
                        this.$axios.get("/adminapi/bangle/abnormal/v1/update/rule", {
                            params: { unwornNum: this.form1.unwornNum, uploadNum: this.form1.uploadNum }
                        }).then(response => {
                            if (response.data.error == 10000) {
                                this.$util.successMsg("设置成功");
                                this.getList(1);
                            } else {
                                this.$util.errorMsg(response.data.message);
                            }
                        }).catch(response => {
                            this.$util.errorMsg(response.data.message);
                        })
                    }
                })
            },
            openBounce() {
                this.$axios.get("/adminapi/bangle/abnormal/v1/get/rule").then(response => {
                    if (response.data.error == 10000) {
                        let info = response.data.data;
                        this.form1.uploadNum = info.notUploadNum || 3;
                        this.form1.unwornNum = info.unwornNum || 3;
                        this.dialogVisible1 = true;
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            }
        }
    }
</script>
<style>
    #abnormalBrac .label {
        height: 40px;
        display: inline-block;
    }

    .my-inp {
        width: 70px;
        margin: 0 10px;
    }

    .my-inp input[type=number] {
        -moz-appearance: "textfield";
        text-align: center;
    }

    .my-inp input[type=number]::-webkit-inner-spin-button,
    .my-inp input[type=number]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        text-align: center;
    }
</style>